<template>
  <PageWrapper title="富文本组件示例 https://www.wangeditor.com/">
    <div style="border: 1px solid #ccc; z-index: 10000;">
      <Toolbar 
        style="border-bottom: 1px solid #ccc;" 
        :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
      <Editor 
        style="height: 500px; overflow-y: hidden;"
        v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode"
        @onCreated="handleCreated" 
        @onChange="handleChange" 
        @onDestroyed="handleDestroyed" 
        @onFocus="handleFocus"
        @onBlur="handleBlur" 
        @customAlert="customAlert" 
        @customPaste="customPaste">
      </Editor>
    </div>
  </PageWrapper>
</template>
<script lang="ts" setup>

import { PageWrapper } from '/@/components/Page';
import { useMessage } from '/@/hooks/web/useMessage';
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { onBeforeUnmount, ref, reactive, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

const { createMessage } = useMessage();

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 内容 HTML
const valueHtml = ref('<p>hello</p>')

const mode = ref('default') // 或 'simple'

// 模拟 ajax 异步获取内容
onMounted(() => {
  setTimeout(() => {
    valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
  }, 1500)
})

const toolbarConfig = ref({})

//自定义上传图片
const uploadImg = (file, insertFn) => {
  let imgData = new FormData();
  console.log(file);
  imgData.append("file", file);

  // 插入后端返回的url
  insertFn('https://tse4-mm.cn.bing.net/th/id/OIP-C.7KW5GT7NQ8yUGlBbCHEm0gHaNK?pid=ImgDet&rs=1');
}

// 自定义插入图片
const insertImg = (file) => {
  console.log(file);
}

const editorConfig = reactive({ 
  placeholder: '请输入内容...',
   // 所有的菜单配置，都要在 MENU_CONF 属性下
   MENU_CONF: {
      //配置上传图片
      uploadImage: {
        // 自定义上传图片 方法
        customUpload: uploadImg,
        // 自定义插入图片 方法
        customInsert: insertImg,
        //server必须要配置正确,我这里因为上传图片有点特殊，在上面方法配置了，所以此处不用配置地址
        // server: 'https://xwbdzzz.haiyan.gov.cn:10002/form/temp/update/ajax/img',

        maxFileSize: 4 * 1024 * 1024, // 1M
        // 最多可上传几个文件，默认为 100
        maxNumberOfFiles: 100,
        // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
        allowedFileTypes: [],
        // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
        fieldName: "file",
        meta: {
          //官网中把token放到了这里，但是请求的时候会看不到token
        },
        headers: {
          // 所以token放这里
          // token: window.sessionStorage.token,
        },
        // 将 meta 拼接到 url 参数中，默认 false
        metaWithUrl: false,
        // 跨域是否传递 cookie ，默认为 false
        withCredentials: false,
        // 超时时间，默认为 10 秒
        timeout: 5 * 1000, // 5 秒

        // 上传之前触发
        // onBeforeUpload(file) {
        //   console.log(file);    // JS 语法
        //     // file 选中的文件，格式如 { key: file }
        //     return file

        //     // 可以 return
        //     // 1. return file 或者 new 一个 file ，接下来将上传
        //     // 2. return false ，不上传这个 file
        // },

        // // 上传进度的回调函数

        // onProgress(progress) {       // JS 语法
        //     // progress 是 0-100 的数字
        //     console.log('progress', progress)
        // },

        // // 单个文件上传成功之后

        // onSuccess(file, res) {          // JS 语法
        //     console.log(`${file.name} 上传成功`, res)
        // },

        // // 单个文件上传失败
        // onFailed(file, res) {           // JS 语法
        //     console.log(`${file.name} 上传失败`, res)
        // },

        // // 上传错误，或者触发 timeout 超时

        // onError(file, err, res) {               // JS 语法
        //     console.log(`${file.name} 上传出错`, err, res)
        // },
      },
      // 配置上传视频（同上传图片）
      uploadVideo: {}
    }
})

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

// 编辑器回调函数
const handleCreated = (editor) => {
  console.log('created', editor);
  editorRef.value = editor; // 记录 editor 实例，重要！
};
const handleChange = (editor) => {
  console.log('change:', editor.getHtml());
};
const handleDestroyed = (editor) => {
  console.log('destroyed', editor);
};
const handleFocus = (editor) => {
  console.log('focus', editor);
};
const handleBlur = (editor) => {
  console.log('blur', editor);
};
const customAlert = (info, type) => {
  createMessage.warning(`【自定义提示】${type} - ${info}`);
};
const customPaste = (editor, event, callback) => {
  console.log('ClipboardEvent 粘贴事件对象', event);

  // 自定义插入内容
  editor.insertText('xxx');

  // 返回值（注意，vue 事件的返回值，不能用 return）
  callback(false); // 返回 false ，阻止默认粘贴行为
  // callback(true) // 返回 true ，继续默认的粘贴行为
};

</script>

<style >

</style>
